<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>支付宝沙箱支付</title>
  <style>
    body, html {
      height: 100%;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #1D1C37; /* 可选：设置背景色以突出居中效果 */
    }

    .container {
      text-align: center; /* 可选：确保子元素（如果非flex项目）也能在容器中居中 */
      width: 100%; /* 根据需要设置容器宽度 */
    }

    .payment-button-wrapper {
      display: flex;
      align-items: center; /* 垂直居中图片和按钮 */
      justify-content: space-between; /* 图片和按钮之间有一定间距 */
    }

    .payment-icon {
      width: 30%; /* 设置图片宽度 */
      height: auto; /* 自动调整高度以保持图片比例 */
      margin-right: 10px; /* 图片和按钮之间的间距 */
    }

    .payment-button {
      /* 你可以在这里添加按钮的样式 */
      padding: 15px 20px;
      background-color: #F9C73D; /* 绿色背景 */
      color: white;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-size: 25px;
    }

    .form-container {
      display: none;
      margin-top: 20px;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 200px;
    }
    .form-container label {
      display: block;
      margin-bottom: 10px;
      color: white;
    }
    .form-container input[type="submit"] {
      margin-top: 10px;
    }

  </style>
</head>
<body>
<div class="container">

  <div class="payment-button-wrapper">
    <img src="/images/vip.png" alt="Payment Icon" class="payment-icon" style="width: 627px; height: 280px;">
    <button id="payButton" class="payment-button">开通VIP会员</button>
  </div>

  <div class="form-container" id="paymentForm">
  <form id="vipForm">
    <label for="vip-duration">选择VIP套餐：</label>
    <select id="vip-duration" name="vip-duration">
      <option value="包年">包年</option>
      <option value="包季">包季</option>
      <option value="包月">包月</option>
    </select>
    <input type="submit" value="提交并支付">
  </form>
</div>

<div id="alipayFormContainer" style="display:none;"></div>
</div>

<script>
  // 当点击提交按钮时触发事件
  document.getElementById('payButton').addEventListener('click', function() {
    //显示表单
    var formContainer = document.getElementById('paymentForm');
    formContainer.style.display = 'block';
    //监听表单提交事件
    document.getElementById('vipForm').addEventListener('submit', function(event) {
      event.preventDefault();
      // 获取用户选择的VIP时间
      var vipDuration = document.getElementById('vip-duration').value;
      var price;
      switch (vipDuration) {
        case '包年':
          price = 148;
          break;
        case '包季':
          price = 50;
          break;
        case '包月':
          price = 12;
          break;
      }
      // 使用fetch API发送一个GET请求到/pay端点，并带上价格和时长作为查询参数
      fetch('/pay?price=' + price + '&subject=' + vipDuration)
              .then(response => response.text())
              .then(data => {
                var alipayFormContainer = document.getElementById('alipayFormContainer');
                alipayFormContainer.innerHTML = data;
                alipayFormContainer.querySelector('form').submit();// 自动提交表单，跳转到支付宝支付页面
              })
              .catch(error => {
                console.error('Error:', error);
              });
    });
  });
</script>

</body>
</html>
